<style lant="scss" scoped></style>

<template>
    <div>
        <el-form :model="Ssform" label-width="80px" inline>
            <el-form-item label="用户名" prop="searchValue">
                <el-input v-model="Ssform.searchValue" placeholder="请输入用户名"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="getList">查询</el-button>
                <el-button @click="onReset">重置</el-button>
                <el-button type="primary" @click="handleAdd">新增</el-button>
            </el-form-item>
        </el-form>



        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="id" width="180" />
            <el-table-column prop="shopName" label="用户名" width="180" />
            <el-table-column prop="shopDescription" label="描述" />
            <el-table-column prop="shopImage" label="图片" width="180">
                <template #default="scope">
                    <img :src="scope.row.shopImage" style="width: 50px; height: 50px" alt="" />
                </template>
            </el-table-column>
             <el-table-column  label="禁用状态" width="180" />
            <el-table-column label="操作" width="180">
                <template #default="scope">
                    <el-button type="primary" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

       
        <el-pagination v-model:current-page="pageCode" v-model:page-size="pageSize" :background="true"
            layout="prev, pager, next, jumper" :total="total" @change="getList"></el-pagination>
        <el-dialog v-model="visible" title="添加/编辑">
            <el-form :model="form" label-width="120px">
                <el-form-item label="用户名">
                    <el-input v-model="form.shopName" />
                </el-form-item>
                <el-form-item label="描述">
                    <el-input v-model="form.shopDescription" />
                </el-form-item>
                <el-form-item label="图片">
                    <el-input v-model="form.shopImage" />
                </el-form-item>
            </el-form>
>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="qx">取消</el-button>
                    <el-button type="primary" @click="qd">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import axios from 'axios';
import { ref } from 'vue'

// 定义搜索表单数据
const Ssform = ref({
    searchValue: '',
    type: ''
})

// 定义对话框显示状态
const visible = ref(false)
// 定义编辑状态
const flag = ref(true)

// 定义表格数据
const tableData = ref([])

// 定义当前页码
const pageCode = ref(1)
// 定义每页显示数量
const pageSize = ref(10)
// 定义总数据量
const total = ref()

// 定义获取列表方法
const getList = async () => {
    // 发送请求获取数据
    const res = await axios.get('/api/list', {
        params: {
            pageCode: pageCode.value,
            pageSize: pageSize.value,
            ...Ssform.value
        }
    })
    // 解析数据
    const { data, totalCount } = res.data.data
    // 更新表格数据和总数据量
    tableData.value = data
    total.value = totalCount
}

// 添加方法
const handleAdd = () => {
    // 设置编辑状态
    flag.value = true
    // 显示对话框
    visible.value = true
    // 清空表单数据
    form.value = {
        shopName: '',
        shopDescription: '',
        shopImage: ''
    }
}

// 重置方法
const onReset = () => {
    Ssform.value = {
        searchValue: '',
        type: ''
    }
    getList()
}

// 定义表单数据
const form = ref({
    shopName: '',
    shopDescription: '',
    shopImage: ''
})

// 定义编辑方法
const handleEdit = (row: any) => {
    // 设置编辑状态
    flag.value = false
    // 显示对话框
    visible.value = true
    // 更新表单数据
    form.value = row
}

// 定义取消方法
const qx = () => {
    // 隐藏对话框
    visible.value = false
}

// 定义确定方法
const qd = async () => {
    // 隐藏对话框
    visible.value = false
    if (flag.value) {
        await axios.put('/api/list', form.value)
    } else {
        await axios.post('/api/list', form.value)
    }
    await getList()
}

// 定义删除方法
const handleDelete = async (id: string) => {
    await axios.delete('/api/list/?id=' + id)
    await getList()
}

// 调用获取列表方法
getList()
</script>